.searchable-select {
  $group-indent: 20px;
  $indent: 20px;
  $group-padding: 8px 0px 8px 20px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  position: relative;

  .input-arrow {
    position: relative;
    background-image: url(images/dropdown-arrow.svg);
    background-repeat: no-repeat;
    background-size: 15px 10px;
    background-position: calc(100% - 10px) center;
  }

  &.show-dropdown-arrow {
    .input-search {
      @extend .input-arrow;
      &:hover{
        @extend .input-arrow;
      }
      &:focus{
        @extend .input-arrow;
      }
    }
  }
  .searchable-option-active {
    background: $link-hover-color;
    color: white;
  }

  font-family: $text-font-stack;
  position: relative;
  color: $text-color;

  .searchable-group {
    background: lighten($dropdown-bg, 5%);
    .group-label {
      color: $text-muted;
      padding: $group-padding;
      font-weight: bold;
      border-bottom: 1px solid $accent-border;
      background: $dropdown-bg;
      text-align: left;
    }
    > div {
      padding-left: $indent + $group-indent;
    }
  }

  .searchable-options {
    overflow-y: scroll;
    background: $dropdown-bg;
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    z-index: 999;
    border: 1px solid $accent-border;
    border-top: none;

    @expand .dropdown-menu;

    input {
      margin-bottom: 10px;
      border-left: none;
      border-right: none;
      border-color: $input-border;
      background: $input-bg;
    }
    input:hover {
      border-color: $input-border;
      background: $input-bg;
    }
  }
  .searchable-option, .searchable-prompt {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    padding: 0px 0;
    padding-left: $indent;
    position: relative;
    padding: 8px 18px;
    font-size: 14px;

    .icon-check {
      margin-left: -15px;
      margin-right: 5px;
      font-size: 10px;
    }
  }
  .no-match {
    padding-left: $indent;
  }
  .no-options {
    border: none !important;
  }

  &:not(.loading) .icon-spinner {
      display: none;
  }

  .icon-spinner {
      position: absolute;
      top: 0;
      font-size: 1.8em;
      line-height: 1.5;
  }
}
